<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Audiobook Stand</title>
        <link href="resources/css/style.css" rel="stylesheet" type="text/css" />
        <h:outputScript library="js" name="//code.jquery.com/jquery-1.11.0.min.js"/>
        <h:outputScript library="primefaces" name="//code.jquery.com/jquery-migrate-1.2.1.min.js"/>
        <script src="resources/js/script.js"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </h:head>
    <h:body class="bodyClass">
        <h:form>
            <div class="navbar navbar-inverse" role="navigation">
                <div class="container">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <h:link class="navbar-brand" outcome="mainpage" style="margin-top: -5px; margin-left: -90px;" >
                        <h:graphicImage value="resources/images/AudiobookStandBanner.png" />
                    </h:link>
                  </div>
                  <div class="navbar-collapse collapse" style="margin-top: 49px; margin-left: 290px;">
                    <ul class="nav navbar-nav" style="margin-left: -100px;">
                        <li><a href="mainpage.xhtml">Anasayfa</a></li>
                        <li><a href="productList.xhtml?categoryId=1">Kitap</a></li>
                        <li><a href="productList.xhtml?categoryId=2">CD</a></li>
                        <li><a href="cokSatanlar.xhtml">Çok satanlar</a></li>
                        <li><a href="cokSatanYazarlar.xhtml">Çok satan yazarlar</a></li>
                        <li><a href="hakkimizda.xhtml">Hakkımızda</a></li>
                        <li><a href="iletisim.xhtml">İletişim</a></li>
                    </ul>
                    <ul class="nav navbar-nav" style="float:right; margin-right: -110px;">
                        <li class="active">
                            <h:commandButton value="Hoşgeldiniz #{loginController.user.username}" action="userPage" actionListener="#{customerController.prepareEditForUserpage}"  class="btn btn-default" style="margin-top: 6px;">
                                <f:attribute name="username" value="#{loginController.user.username}" />
                            </h:commandButton>
                        </li>
                        <c:if test="#{loginController.user.username == 'admin'}">
                            <li><h:commandButton value="Yönetim Paneli" action="index" class="btn btn-default" style="margin-top: 6px;"/></li>
                        </c:if>
                        <li><h:commandButton value="Çıkış Yap" action="#{loginController.logout()}" class="btn btn-default" style="margin-top: 6px;"/></li>
                    </ul>
                  </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-6 col-sm-2" >
                        <h3><span class="label label-default">KİTAP</span></h3>
                        <p:menu model="#{mainpageController.bookModel}" />
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-8">
                        <h3><span class="label label-default">ARTIST</span></h3>
                        <ui:repeat value="#{detailController.artist}" var="artist">
                            <p:panel id="basic" header="#{artist.name} #{artist.surname}" style="margin-bottom:20px">
                               <h:panelGrid columns="3" cellpadding="10">
                                   <p:graphicImage value="#{artist.image}" style="width: 150px; height: 200px;" onclick="PF('dlg').show()"/>
                                   <h:outputText value="#{artist.description}" />
                                   <br/>
                                   <h:outputText value="Eserleri:" />
                                   <ui:repeat value="#{detailController.products}" var="product">
                                       <a href="productDetail.xhtml?productId=#{product.id}" >
                                           "<h:outputText value="#{product.name}"/>"
                                       </a>
                                   </ui:repeat>
                               </h:panelGrid>
                           </p:panel>
                            <p:dialog header="#{artist.name} #{artist.surname}" widgetVar="dlg" modal="true" draggable="false" resizable="false">
                                    <p:imageSwitch effect="fade">
                                       <p:graphicImage value="#{artist.image}" />
                                    </p:imageSwitch>
                             </p:dialog>
                        </ui:repeat>
                    </div>
                    <div class="col-xs-6 col-sm-2" >
                        <h3><span class="label label-default">CD</span></h3>
                        <p:menu model="#{mainpageController.CDModel}" />
                    </div>
                </div>
            </div>
        </h:form>
    </h:body>
</html>